<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/paint-friend.css">
		<link rel="stylesheet" href="css/normalize.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/iconfont01.css" />
		<link rel="stylesheet" href="css/iconfont02.css" />
		<link rel="stylesheet" href="css/sapa1.css" />
		<link rel="stylesheet" href="css/span.css" />
		<style type="text/css">
			body{
				background: #f6f9fa;
			}
			#sc{
				width: 162%;
			    background: #f4f4f4;
			    margin-top: -6px;

			}
			#button{
				margin-left: 147px;
				
			}
			.span{
				    margin: -8px;
				    background: white;
				    margin-top: -2px;
				  
			}
			.clearfix>.left_nav li>a{
				text-decoration: none;
			}
			.clearfix>.right_nav li>a{
				text-decoration: none;
			}
			#button01{
				position: absolute;
				outline: none;
				border: none;
				height: 32px;
				background: rgba(0,0,0,.45);
				margin-top: 20px;
				color: white;
				width: 38%;
				font-size: 10px;
				border-radius: 4px;
				padding: 0 10px;
				margin-left: -27px;
				transition: all .1s ease;
			}
			#ul{
				margin-top: 61px;
			    max-width: -7px;
			    min-width: 98px;
			}
			#ul>li>a{
				height: 40px;
			    line-height: 36px;
			    text-align: center;
			    font-size: 14px;
			}
			#ul>li>a:hover{
				color: #23c9ed;
				background-color: #c8c8c8bf;
			}
			#bo{
				position: relative;
			    width: 64px;
			    height: 64px;
			    border: 2px solid hsla(0,0%,100%,.4);
			    border-radius: 52px;
			    margin-top: 26px;
			}
			#h_bo{
				width: 60px;
			    height: 60px;
			    background: #fff;
			    border-radius: 48px;
			}
			.boimg{
				position: absolute;
				left: 0;
				line-height: 64px;
				text-align: center;
				opacity: 0;
				border-radius: 50%;
				text-decoration: none;
			}
			.boimg:hover{
				position: absolute;
				left: 0;
				font-size: 12px;
				color: #fff;
				width: 60px;
				height: 60px;
				background: rgba(0,0,0,.6);
				position: absolute;
				opacity: 1;
				transition: opacity .2s;
				text-decoration: none;
			}
			#sp{
				margin-right: 5px;
    			font-weight: 700;
    			line-height: 18px;
    			font-size: 18px;
    			color: white;
			}
			#lv{
			    vertical-align: middle;
			    text-align: center;
			    line-height: 18px;
			    background: #bfbfbf;
			    color: white;
			    display: inline-block;
			    width: 31px;
			    height: 18px;
			    margin-right: 5px;
			    margin-top: -6px;
			    border-radius: 6px;
			    font-weight: 100;
			    text-decoration: none;
			}
			#ge{
				background: transparent;
			    border-radius: 4px;
			    border: none;
			    box-shadow: none;
			    color: #f4f5f7;
			    font-size: 12px;
			    line-height: 26px;
			    height: 26px;
			    margin-left: -5px;
			    position: relative;
			    top: -1px;
			}
			#ge:hover{
			    border-radius: 4px;
			    color:#f4f5f7;
			    font-size: 12px;
			    line-height: 26px;
			    height: 26px;
			    margin-left: -5px;
			    position: relative;
			    top: -1px;
			    border: 1px white solid;
			    background: #d6dee491;
			}
			#ge:active{
				opacity: 1;
				border: 1px white solid;
			    background: white;
			}
			#n{
			    height: 66px;
			    background: #fff;
			    box-shadow: 0 0 0 1px #eee;
			    border-radius: 0 0 4px 4px;
			    padding: 0 20px;
			    font-size: 0px;
			    width: 1280px;
    			margin-left: 328px;
			}
			#a{
				font-size: 13px;
				margin-left: 14px;
			}
			#sc02{
			    width: 100px;
			    height: 30px;
			    background: #f4f4f4;
			    margin-top: -6px;
			    border-radius: 90px;
			    background-color: white;
			}
			#bian{
				margin-left: 1175px;
				margin-top: 18px;
			}
			#bian>a>div{
				color: #99a2aa;
			}
			#bian>a{
				text-decoration: none;
			}
			#bian>a>div:hover{
				color: #23c9ed;
			}
			#bian2{
				margin-left: 1227px;
				margin-top: -40px;
			}
			#bian2>a>div{
				color: #99a2aa;
			}
			#bian2>a{
				text-decoration: none;
			}
			#bian2>a>div:hover{
				color: #23c9ed;
			}
			#num{
				margin-left: 16px;
				color: black;
			}
			header div.top_nav {
			    left: -9px;
			}
		</style>
	</head>
	<body>
		<header class="clearfix">
		<div class="top_nav">
			<div class="top_nav_con clearfix" style="width: 1297px;">
				<ul class="left_nav">
					<li class="span"><a href="new_file.html">
						<span class="iconfont icon-bilibili"></span>
					</a></li>
					<li><a href="index.html">主站</a></li>
					<li><a href="paint-friend.html">画友</a></li>
					<li><a href="game.html" target="_blank">游戏中心</a></li>
					<li><a href="video.html">直播</a></li>
					<li><a href="shop.html">周边</a></li>
					<li><a href="###">移动端</a></li>
				</ul>
				 <!-- 搜索框-->
				  <form class="navbar-form  navbar-left" action="" method="post">
					<div class="form-group">
					<input type="text" id="sc" class="form-control" placeholder="请输入要找的类容"/>
					</div>
					<div class="form-group" style="margin-left: -65px;margin-top: -3px;">
						<button id="button" class="btn btn-link" style="outline: none;border: none;color: #999;">
							<span class="glyphicon glyphicon-search"></span>
						</button>
					</div>
				</form>
				<!---->
				<ul class="right_nav">
					<li><a href="###">大会员</a></li>
					<li><a href="###">消息</a></li>
					<li><a href="###">动态</a></li>
					<li><a href="###">稍后再看</a></li>
					<li><a href="blibli_Favorite.html">收藏夹</a></li>
					<li><a href="###">历史</a></li>
					<li><a href="###">创作中心</a></li>	
					<li class="tgao_li">
						<a href="###" class="tgao" style="background: #e75788;border-radius: 0 0 5px 5px;">
							投稿</a>
						<ul class="tgao_info">
							<li><a href="###"><i class="i1"></i><span>视频投稿</span></a></li>
							<li><a href="###"><i class="i2"></i><span>投稿管理</span></a></li>
							<li><a href="###"><i class="i3"></i><span>创作中心</span></a></li>
						</ul>
					</li>
				</ul>

				<div class="user" style="margin-left: 130px;">
					<a href="###" class="user_img"></a>
					<div class="info_box" id="infoBox">
						<div class="user_info">
							<div class="info_top">
								<p class="username">Tracy_腾</p>
								<p class="userdefaure clearfix">
									<span class="de_l">
										<a href="###" title="硬币"><b>34</b></a>
										<a href="###" title="B币"><b>0</b></a>
									</span>
									<span class="de_r">
										<a href="###" class="e_link"><span class="email">前去绑定邮箱</span><i class="email_i"><em class="email_em"></em></i></a>
										<a href="###" class="p_link"><span class="phone">前去绑定手机</span><i><em></em></i></a>
									</span>
								</p>
								<p class="userlevel clearfix">
									<span class="levelbox clearfix">
										<i>等级</i>
										<a href="###" id="level_link">
											<em class="level_num"></em>
											<em class="level_line"></em>
										</a>
									</span>
									<span class="ex"><b>0</b>/1500</span>
									</p><div class="level_info" id="levelInfo">
										<h2>作为<strong>LV2</strong>, 你可以：</h2>
										<ul>
											<li>1、发射个性弹幕（彩色、高级）</li>
											<li>2、参与视频互动（评论）</li>
											<li>3、投稿成为偶像 </li>
										</ul>
										<p><a href="###">会员等级相关说明 &gt;</a></p>
										<i><em></em></i>
									</div>
								<p></p>
							</div>
							<div class="info_mid">
							<ul class="clearfix">
								<li><a href="###">个人中心</a></li>	
								<li><a href="###">投稿管理</a></li>
								<li><a href="###">B币钱包</a></li>	
								<li><a href="###">直播中心</a></li>
							</ul>
							</div>
						</div>
						<div class="user_out"><a href="###">退出</a></div>
					</div>
				</div>
			</div>
		</div>
		
	</header>
		<!--身体内容-->
		<div style="margin-top: -5px;"> 
			<!---->
			<div class="container">
				<div class="row">
					<div class="col-md-12 col-md-pull-1">
						<img src="img/head.png" style="position: absolute;background-position: 50%;margin-left: 35px;"/>
						<!--视角-->
						<div class="row">
							<div class="col-md-3 col-md-push-12 dropdown">
								<button id="button01" class="dropdown-toggle" data-toggle="dropdown">
								视角：我自己
								<span class="glyphicon glyphicon-menu-down"></span>
								</button>
								 <ul class="dropdown-menu" id="ul">
				                    <li><a href="#">新访客</a></li>
				                    <li><a href="#">我的粉丝</a></li>
				                </ul>
							</div>
							<!---->
							<!--头像图-->
							<div class="row" style="width: 100%;height: 100px;margin-top: 99px;margin-left: 51px;">
								<div class="col-md-12">
									<div id="bo">
										<img src="img/noface.gif" id="h_bo"/>
										<a target="_blank" href="blibli_login.html" class="boimg">更换头像</a>
									</div>
									<!--昵称-->
									<div class="row" style="margin-top: -52px;margin-left: -26px;">
										<div class="col-md-3 col-md-push-1" style="position: absolute;">
										<span id="sp">宇宙无敌牛逼张世纪
										<!--等级-->
										<a href="#" id="lv">LV1</a>
										<!---->
										</span>
										</div>
									</div>
									<!---->
									<!--编辑个性签名-->
									<div class="row" style="margin-top: 26px;">
										<div class="col-md-8 col-md-push-1">
											<!--<h4 id="h" style="display: none;"></h4>-->
											<input id="ge" type="text" class="form-control" placeholder="编辑个性签名"/>
										</div>
									</div>
									<!---->
								</div>
							</div>
							<!---->
							
						</div>
						
					</div>
					
				</div>
				<!---->
			</div>
			<!--导航栏-->
			<header class="clearfix" style="max-width: 1280px;margin-left: 328px;box-shadow:none ;">
				<div class="top_nav" style="height: 66px;">
					<div class="top_nav_con clearfix" style="width: 1297px;">
						<ul class="left_nav" style="margin-top: 11px;margin-left: -38px;">
							<li>
								<a id="a" href="">
								<span class="iconfont icon-homepage_selected"></span>
								<span>主页</span>
								</a>
							</li>
							<li>
								<a id="a" href="">
								<span class="iconfont icon-dongtai-normal"></span>
								<span>动态</span>
								</a></li>
							<li>
								<a id="a" href="">
								<span class="iconfont icon-zaixiantougao"></span>
								<span>投稿</span>
								</a></li>
							<li>
								<a id="a" href="">
								<span class="iconfont icon-pindaoshezhi"></span>
								<span>频道</span>
								</a></li>
							<li>
								<a id="a" href="">
								<span class="iconfont icon-shoucang"></span>
								<span>收藏</span>
								</a></li>
							<li>
								<a id="a" href="">
								<span class="iconfont icon-xihuan"></span>
								<span>订阅</span>
								</a></li>
								<li>
								<a id="a" href="">
								<span class="iconfont icon-shezhi"></span>
								<span>设置</span>
								</a></li>
						</ul>
						<!-- 搜索框-->
						  <form class="navbar-form  navbar-left" action="" method="post" style="margin-top: 25px;">
							<div class="form-group" style="position: absolute;">
							<input type="text" id="sc02" class="form-control" placeholder="搜索视频"/>
							</div>
							<div class="form-group" style=" margin-left: -81px;margin-top: -6px;width: 0px;">
							<button id="button" class="btn btn-link" style="outline: none;border: none;color: #999;">
									<span class="glyphicon glyphicon-search"></span>
								</button>
							</div>
						</form>
						<!---->
						<!--侧边栏-->
						<div id="bian">
								<a href="#">
									<div>关注数</div>
									<span id="num">1</span>
								</a>	
						</div>
						<div id="bian2">
							<a href="#">
									<div>粉丝数</div>
									<span id="num">1</span>
								</a>
						</div>
						<!---->
						
				</div>
			</header>
			<!---->
				<div>
					
				<div class="container">
				
					<!--内容框-->
			<div class="s-space" style="margin-left: -63px;margin-top: 51px;">
			<div id="page-fav" class="wrapper">
			<div class="col-full clearfix master">
				<div class="fav-sidenav">
				<div class="nav-container fav-container">
					<div class="favlist-title">
						<p>我的创建</p>
						<i class="icon icon-arrow arrow-transform"></i>
					</div>
						<div style="display: block;">
						<div class="be-scrollbar fav-list-container ps" id="fav-createdList-container">
							<div class="nav-title nav-add">
								<span title="创建收藏夹" class="icon icon-add"></span>
								<span class="text">新建收藏夹</span>
							</div>
							<!--添加后的-->
							<div class="fav-item">
								<span class="iconfont icon-bodan"></span>
								<a href="#" class="text router-link-active" title="sss">sss</a><span class="num">0</span>
								<div class="be-dropdown">
									
									<div class="be-dropdown-trigger"><i title="更多操作" class="iconfont icon-ic_more"></i></div>
									<ul class="be-dropdown-menu menu-align" style="left: 0px; top: 0px; transform-origin: center top; display: none;">
										<li class="be-dropdown-item">编辑信息</li>
									</ul>
								</div>
							</div>
							<!---->
						</div>
					</div>
				</div>
				<!---->
				<!--收藏夾-->
				<div class="nav-container playlist-container">
					<div class="fav-list-container">
						<ul class="fav-list">
							<li class="fav-item cur"><span class="icon icon-fav-private"></span>
								<a href="#" class="text">播单收藏夹</a><span class="num">0</span></li>
							<li class="fav-item"><span class="icon icon-fav-private"></span>
								<a href="#" class="text">话题收藏夹</a><span class="num">0</span></li>
							<li class="fav-item"><span class="icon icon-fav-private"></span>
								<a href="#" class="text">专栏收藏夹</a><span class="num">0</span></li>
							<li class="fav-item"><span class="icon icon-fav-private"></span>
								<a href="#" class="text">相簿收藏夹</a><span class="num">0</span></li>
							<li class="fav-item"><span class="icon icon-fav-private"></span>
								<a href="#" class="text">课程收藏夹</a><span class="num">0</span></li>
						</ul>
					</div>
				</div>
				<!---->
				<a href="#" class="watch-later">稍后再看</a>
			</div>
			<!---->
			<!--内容-->
			<div class="fav-main section">
				<div class="fav-header fav-header-info">
					<div class="breadcrumb">
						<p class="item cur">播单收藏夹</p>
					</div>
					<div class="fav-info clearfix">
						<div class="fav-meta"><span class="num">0</span><span class="num">个播单</span></div>
					</div>
				</div>
				<div class="fav-content section empty">
					<div class="search-empty-hint">
						<p>你暂时还没有收藏播单哦~</p>
					</div>
					<ul class="clearfix content playlist-list"></ul>
					<!--<ul class="be-pager" style="display: none;">
						<li title="上一页" class="be-pager-prev be-pager-disabled">
							<a>上一页</a>
						</li>
						<li title="第一页" class="be-pager-item be-pager-item-active">
							<a>1</a>
						</li>
						<li title="下一页" class="be-pager-next be-pager-disabled">
							<a>下一页</a>
						</li><span class="be-pager-total">共 0 页，</span><span class="be-pager-options-elevator"> 跳至
					    <input type="text"> 页
					  </span>
					</ul>-->
				</div>
			</div>
			<!---->
		</div>
		<div class="modal-container edit-video-modal" style="display: none;">
			<div class="modal-mask"></div>
			<div class="modal-wrapper">
				<div class="modal">
					<div class="modal-header"><i class="modal-header-close iconfont icon-ic_close"></i>
						<div class="modal-title">
							<p class="edit-video-title">
								你正在移动0个视频到
							</p>
							<p class="edit-video-subtitle unselected">
								请选择
							</p>
						</div>
					</div>
					<div class="modal-body">
						<div class="favlist-body">
							<div class="be-scrollbar target-favlist ps" slot="body">
								<ul class="target-favlist-container">
									<li class="target-favitem disabled">
										<div class="target-fav-title">
											<div class="fav-select"></div>
											<div class="fav-meta">
												<p class="fav-name">sss</p>
												<p class="fav-state">公开</p>
											</div>
										</div><span class="target-fav-count">0</span></li>
									<!---->
								</ul>
								<div class="addfav-container">
									<div class="fake-fav-input"><i class="icon-fav-add"></i>
										<p>新建收藏夹</p>
									</div>
									<!---->
								</div>
								<div class="ps__rail-x" style="left: 0px; bottom: 0px;">
									<div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
								</div>
								<div class="ps__rail-y" style="top: 0px; right: 0px;">
									<div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
								</div>
							</div>
						</div>
					</div>
					<div  class="btn-container modal-footer btn-center">
						<a  class="btn ghost">
							<!----><span class="btn-content">确定</span></a>
						<!---->
					</div>
				</div>
			</div>
		</div>
		<div class="modal-container fav-guide" style="display: none;">
			<div class="modal-mask"></div>
			<div class="modal-wrapper">
				<div class="modal">
					<div class="modal-header"><i class="modal-header-close iconfont icon-ic_close"></i>
						<div class="modal-title">
							<p>提示</p>
						</div>
					</div>
					<div class="modal-body">
						<div class="guideBg"></div>
						<p class="main-title">收藏夹全新升级~</p><span class="sub-title">支持连续播放！</span><span class="sub-title">旧的播单也可以在左侧看到哦~</span><span class="sub-title">影视收藏夹迁移至订阅－追剧啦!</span></div>
					<div  class="btn-container modal-footer btn-center">
						<a  class="btn primary">
							<!----><span  class="btn-content">确定</span></a>
						<!---->
					</div>
				</div>
			</div>
		</div>
		<div  class="edit-media-list">
			<div  class="edit-mask" style="display: none;">
				<div  class="edit-board no-cover">
					<div  class="head">收藏夹信息
						<i  class="icon-close"></i></div>
					<div class="edit-info">
						<!---->
						<div  class="info-wrap"><label for="media-list-name" class="title"><span  class="red-signal">*</span>收藏夹名称</label> <input type="text" id="media-list-name" placeholder="收藏夹名称" maxlength="20" class="name-input"> <span class="name-num-limit">0/20</span></div>
						<div  class="info-wrap"><label for="media-list-intro" class="title">简介：</label> <textarea  type="text" maxlength="200" placeholder="可填写简介" id="media-list-intro" class="media-list-intro"></textarea> <span class="intro-num-limit">0/200</span></div>
						<div class="media-list-type"><i class="icon-check blue-icon"></i>公开收藏夹
						</div>
						<div  class="submit-btn">提 交</div>
					</div>
				</div>
				<!---->
			</div>
		</div>
	</div>
</div>
							
						</div>
						</div>
					<!---->
			</div>
		</div>
		<!---->
</body>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/paint-friend.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
<script type="text/javascript" src="js/iconfont.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</html>
